<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现课程 - GitHub深色风格</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg-primary: #0d1117;
            --bg-secondary: #161b22;
            --bg-tertiary: #21262d;
            --text-primary: #f0f6fc;
            --text-secondary: #c9d1d9;
            --text-tertiary: #8b949e;
            --border-color: #30363d;
            --accent-color: #58a6ff;
            --success-color: #3fb950;
            --warning-color: #d29922;
            --danger-color: #f85149;
            --border-radius: 6px;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 导航栏样式 */
        header {
            background-color: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
        }

        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
            color: var(--accent-color);
        }

        .nav-links {
            display: flex;
            gap: 24px;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.2s;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text-primary);
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .search-box {
            position: relative;
        }

        .search-box input {
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 12px;
            padding-left: 32px;
            color: var(--text-primary);
            width: 240px;
            font-size: 14px;
        }

        .search-box i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--accent-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
        }

        /* 发现页面特定样式 */
        .explore-header {
            margin: 32px 0 24px;
        }

        .explore-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .explore-subtitle {
            color: var(--text-secondary);
            font-size: 16px;
            margin-bottom: 24px;
        }

        /* 高级筛选器 */
        .advanced-filters {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 24px;
        }

        .filter-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 200px;
        }

        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .filter-select {
            width: 100%;
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 12px;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
        }

        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .tag {
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 4px 12px;
            font-size: 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
        }

        .tag:hover {
            background-color: var(--bg-secondary);
            border-color: var(--text-tertiary);
        }

        .tag.active {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 16px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            text-align: center;
            text-decoration: none;
        }

        .btn-primary {
            background-color: var(--accent-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: #4a93e0;
        }

        .btn-secondary {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background-color: var(--bg-secondary);
        }

        /* 排序和视图控制 */
        .view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .sort-options {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sort-label {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .sort-select {
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 6px 12px;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
        }

        .view-toggle {
            display: flex;
            gap: 8px;
        }

        .view-btn {
            background-color: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 12px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
        }

        .view-btn:hover {
            background-color: var(--bg-secondary);
        }

        .view-btn.active {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }

        /* 课程网格 */
        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .course-card {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .course-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow);
        }

        .course-image {
            height: 160px;
            background-color: var(--bg-tertiary);
            position: relative;
            overflow: hidden;
        }

        .course-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .course-category {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: rgba(13, 17, 23, 0.8);
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .course-level {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(13, 17, 23, 0.8);
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .course-content {
            padding: 16px;
        }

        .course-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-primary);
        }

        .course-description {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 16px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .course-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-tertiary);
            font-size: 12px;
            margin-bottom: 16px;
        }

        .course-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 16px;
        }

        .course-tag {
            background-color: var(--bg-tertiary);
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 11px;
            color: var(--text-secondary);
        }

        .course-actions {
            display: flex;
            gap: 8px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            flex: 1;
            text-align: center;
            text-decoration: none;
        }

        .btn-primary {
            background-color: var(--accent-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: #4a93e0;
        }

        .btn-secondary {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background-color: var(--bg-secondary);
        }

        /* 分页控件 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin: 40px 0;
        }

        .pagination-btn {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 8px 12px;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .pagination-btn:hover:not(:disabled) {
            background-color: var(--bg-tertiary);
            border-color: var(--text-tertiary);
        }

        .pagination-btn.active {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-info {
            color: var(--text-tertiary);
            font-size: 14px;
            margin: 0 16px;
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-tertiary);
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 20px;
            margin-bottom: 8px;
            color: var(--text-secondary);
        }

        /* 页脚 */
        footer {
            border-top: 1px solid var(--border-color);
            padding: 24px 0;
            margin-top: 40px;
            text-align: center;
            color: var(--text-tertiary);
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 16px;
            }

            .nav-links {
                order: 3;
                width: 100%;
                justify-content: center;
            }

            .search-box input {
                width: 200px;
            }

            .filter-row {
                flex-direction: column;
            }

            .filter-group {
                min-width: 100%;
            }

            .view-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .courses-grid {
                grid-template-columns: 1fr;
            }

            .pagination {
                flex-wrap: wrap;
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <i class="fas fa-graduation-cap"></i>
                    StudyRaid
                </a>

                <div class="nav-links">
                    <a href="index.html">首页</a>
                    <a href="explore.html" class="active">发现</a>
                    <a href="learning-path.html">学习路径</a>
                    <a href="my-courses.html">我的课程</a>
                </div>

                <div class="user-menu">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索课程..." id="searchInput">
                    </div>
                    <div class="user-avatar">JS</div>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container">
        <div class="explore-header">
            <h1 class="explore-title">发现课程</h1>
            <p class="explore-subtitle">探索我们精心设计的课程，提升你的技能</p>
        </div>

        <!-- 高级筛选器 -->
        <div class="advanced-filters">
            <div class="filter-row">
                <div class="filter-group">
                    <label class="filter-label">难度级别</label>
                    <select class="filter-select" id="levelFilter">
                        <option value="all">所有级别</option>
                        <option value="beginner">初级</option>
                        <option value="intermediate">中级</option>
                        <option value="advanced">高级</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">课程时长</label>
                    <select class="filter-select" id="durationFilter">
                        <option value="all">所有时长</option>
                        <option value="short">短课程 (0-5小时)</option>
                        <option value="medium">中等 (5-15小时)</option>
                        <option value="long">长课程 (15+小时)</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">课程类型</label>
                    <select class="filter-select" id="typeFilter">
                        <option value="all">所有类型</option>
                        <option value="video">视频课程</option>
                        <option value="interactive">互动课程</option>
                        <option value="project">项目驱动</option>
                    </select>
                </div>
            </div>
            <div class="filter-row">
                <div class="filter-group">
                    <label class="filter-label">热门标签</label>
                    <div class="filter-tags" id="tagFilters">
                        <span class="tag" data-tag="all">全部</span>
                        <span class="tag" data-tag="javascript">JavaScript</span>
                        <span class="tag" data-tag="python">Python</span>
                        <span class="tag" data-tag="react">React</span>
                        <span class="tag" data-tag="nodejs">Node.js</span>
                        <span class="tag" data-tag="vue">Vue</span>
                        <span class="tag" data-tag="typescript">TypeScript</span>
                        <span class="tag" data-tag="docker">Docker</span>
                    </div>
                </div>
            </div>
            <div class="filter-actions">
                <button class="btn btn-secondary" id="resetFilters">重置筛选</button>
                <button class="btn btn-primary" id="applyFilters">应用筛选</button>
            </div>
        </div>

        <!-- 排序和视图控制 -->
        <div class="view-controls">
            <div class="sort-options">
                <span class="sort-label">排序方式:</span>
                <select class="sort-select" id="sortOptions">
                    <option value="popular">最受欢迎</option>
                    <option value="newest">最新发布</option>
                    <option value="rating">最高评分</option>
                    <option value="duration">课程时长</option>
                </select>
            </div>
            <div class="view-toggle">
                <button class="view-btn active" id="gridView">
                    <i class="fas fa-th"></i>
                </button>
                <button class="view-btn" id="listView">
                    <i class="fas fa-list"></i>
                </button>
            </div>
        </div>

        <!-- 课程网格 -->
        <div class="courses-grid" id="coursesGrid">
            <!-- 课程卡片将通过JavaScript动态生成 -->
        </div>

        <!-- 分页控件 -->
        <div class="pagination">
            <button class="pagination-btn" id="prevPage" disabled>
                <i class="fas fa-chevron-left"></i> 上一页
            </button>
            <span class="pagination-info" id="pageInfo">第 1 页，共 1 页</span>
            <button class="pagination-btn" id="nextPage" disabled>
                下一页 <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>© 2023 StudyRaid. 保留所有权利。</p>
            <p>采用 GitHub 深色风格设计</p>
        </div>
    </footer>

    <script>
        // 课程数据 - 扩展版本
        const courses = [
            {
                id: 1,
                title: "JavaScript 高级编程",
                category: "frontend",
                description: "深入学习现代JavaScript，包括ES6+特性、异步编程、模块化等高级概念。",
                duration: "12小时",
                level: "intermediate",
                type: "video",
                tags: ["javascript", "es6", "async"],
                rating: 4.8,
                students: 1250,
                image: "https://placehold.co/300x160/21262d/8b949e?text=JavaScript",
                progress: 65
            },
            {
                id: 2,
                title: "Python 数据分析",
                category: "data",
                description: "使用Pandas、NumPy和Matplotlib进行数据清洗、分析和可视化。",
                duration: "18小时",
                level: "beginner",
                type: "interactive",
                tags: ["python", "pandas", "numpy", "data-analysis"],
                rating: 4.6,
                students: 980,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Python",
                progress: 30
            },
            {
                id: 3,
                title: "Node.js 与 Express",
                category: "backend",
                description: "构建快速、可扩展的Web应用程序和API，使用现代JavaScript技术栈。",
                duration: "15小时",
                level: "intermediate",
                type: "project",
                tags: ["nodejs", "express", "backend", "api"],
                rating: 4.7,
                students: 1120,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Node.js",
                progress: 100
            },
            {
                id: 4,
                title: "Figma 设计入门",
                category: "design",
                description: "学习使用Figma进行界面设计、原型制作和团队协作。",
                duration: "8小时",
                level: "beginner",
                type: "video",
                tags: ["figma", "ui-design", "ux-design"],
                rating: 4.5,
                students: 750,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Figma",
                progress: 0
            },
            {
                id: 5,
                title: "Docker 与容器化",
                category: "devops",
                description: "掌握Docker容器技术，实现应用程序的快速部署和扩展。",
                duration: "10小时",
                level: "intermediate",
                type: "interactive",
                tags: ["docker", "containers", "devops"],
                rating: 4.9,
                students: 890,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Docker",
                progress: 45
            },
            {
                id: 6,
                title: "React Native 开发",
                category: "mobile",
                description: "使用React Native构建跨平台移动应用程序，一次编写，多端运行。",
                duration: "20小时",
                level: "advanced",
                type: "project",
                tags: ["react", "react-native", "mobile", "cross-platform"],
                rating: 4.7,
                students: 680,
                image: "https://placehold.co/300x160/21262d/8b949e?text=React+Native",
                progress: 80
            },
            {
                id: 7,
                title: "Vue.js 实战开发",
                category: "frontend",
                description: "从基础到高级，掌握Vue.js框架及其生态系统。",
                duration: "14小时",
                level: "beginner",
                type: "video",
                tags: ["vue", "javascript", "frontend"],
                rating: 4.6,
                students: 940,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Vue.js",
                progress: 20
            },
            {
                id: 8,
                title: "Spring Boot 企业级开发",
                category: "backend",
                description: "使用Spring Boot构建企业级Java应用程序。",
                duration: "16小时",
                level: "advanced",
                type: "project",
                tags: ["java", "spring", "spring-boot", "backend"],
                rating: 4.8,
                students: 720,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Spring+Boot",
                progress: 60
            },
            {
                id: 9,
                title: "机器学习基础",
                category: "data",
                description: "入门机器学习，了解基本概念和常用算法。",
                duration: "22小时",
                level: "intermediate",
                type: "interactive",
                tags: ["python", "machine-learning", "ai", "data-science"],
                rating: 4.7,
                students: 1100,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Machine+Learning",
                progress: 10
            },
            {
                id: 10,
                title: "Flutter 应用开发",
                category: "mobile",
                description: "使用Flutter框架开发高性能的跨平台移动应用。",
                duration: "18小时",
                level: "intermediate",
                type: "project",
                tags: ["flutter", "dart", "mobile", "cross-platform"],
                rating: 4.5,
                students: 560,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Flutter",
                progress: 40
            },
            {
                id: 11,
                title: "TypeScript 进阶",
                category: "frontend",
                description: "深入学习TypeScript，提升JavaScript开发体验。",
                duration: "10小时",
                level: "intermediate",
                type: "video",
                tags: ["typescript", "javascript", "frontend"],
                rating: 4.8,
                students: 820,
                image: "https://placehold.co/300x160/21262d/8b949e?text=TypeScript",
                progress: 75
            },
            {
                id: 12,
                title: "数据库设计与优化",
                category: "backend",
                description: "学习数据库设计原则和性能优化技巧。",
                duration: "12小时",
                level: "advanced",
                type: "interactive",
                tags: ["database", "sql", "performance", "backend"],
                rating: 4.6,
                students: 670,
                image: "https://placehold.co/300x160/21262d/8b949e?text=Database",
                progress: 90
            }
        ];

        // 页面状态
        let currentPage = 1;
        const coursesPerPage = 6;
        let currentLevel = 'all';
        let currentDuration = 'all';
        let currentType = 'all';
        let currentTags = [];
        let currentSort = 'popular';
        let currentSearchTerm = '';
        let isGridView = true;

        // DOM元素
        const coursesGrid = document.getElementById('coursesGrid');
        const prevPageBtn = document.getElementById('prevPage');
        const nextPageBtn = document.getElementById('nextPage');
        const pageInfo = document.getElementById('pageInfo');
        const searchInput = document.getElementById('searchInput');
        const levelFilter = document.getElementById('levelFilter');
        const durationFilter = document.getElementById('durationFilter');
        const typeFilter = document.getElementById('typeFilter');
        const tagFilters = document.getElementById('tagFilters');
        const sortOptions = document.getElementById('sortOptions');
        const gridViewBtn = document.getElementById('gridView');
        const listViewBtn = document.getElementById('listView');
        const resetFiltersBtn = document.getElementById('resetFilters');
        const applyFiltersBtn = document.getElementById('applyFilters');

        // 初始化页面
        function initPage() {
            renderCourses();
            setupEventListeners();
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 分页按钮
            prevPageBtn.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    renderCourses();
                }
            });

            nextPageBtn.addEventListener('click', () => {
                const totalPages = Math.ceil(getFilteredCourses().length / coursesPerPage);
                if (currentPage < totalPages) {
                    currentPage++;
                    renderCourses();
                }
            });

            // 搜索功能
            searchInput.addEventListener('input', function () {
                currentSearchTerm = this.value.toLowerCase();
                currentPage = 1;
                renderCourses();
            });

            // 筛选器
            levelFilter.addEventListener('change', function () {
                currentLevel = this.value;
                currentPage = 1;
            });

            durationFilter.addEventListener('change', function () {
                currentDuration = this.value;
                currentPage = 1;
            });

            typeFilter.addEventListener('change', function () {
                currentType = this.value;
                currentPage = 1;
            });

            // 标签筛选
            tagFilters.addEventListener('click', function (e) {
                if (e.target.classList.contains('tag')) {
                    const tag = e.target.dataset.tag;

                    if (tag === 'all') {
                        // 重置所有标签
                        currentTags = [];
                        document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
                        e.target.classList.add('active');
                    } else {
                        // 切换标签选择状态
                        if (e.target.classList.contains('active')) {
                            e.target.classList.remove('active');
                            currentTags = currentTags.filter(t => t !== tag);
                        } else {
                            e.target.classList.add('active');
                            currentTags.push(tag);
                        }

                        // 如果所有标签都被取消选择，则激活"全部"标签
                        if (currentTags.length === 0) {
                            document.querySelector('.tag[data-tag="all"]').classList.add('active');
                        } else {
                            document.querySelector('.tag[data-tag="all"]').classList.remove('active');
                        }
                    }

                    currentPage = 1;
                }
            });

            // 排序选项
            sortOptions.addEventListener('change', function () {
                currentSort = this.value;
                currentPage = 1;
                renderCourses();
            });

            // 视图切换
            gridViewBtn.addEventListener('click', function () {
                if (!isGridView) {
                    isGridView = true;
                    gridViewBtn.classList.add('active');
                    listViewBtn.classList.remove('active');
                    coursesGrid.classList.remove('list-view');
                    renderCourses();
                }
            });

            listViewBtn.addEventListener('click', function () {
                if (isGridView) {
                    isGridView = false;
                    listViewBtn.classList.add('active');
                    gridViewBtn.classList.remove('active');
                    coursesGrid.classList.add('list-view');
                    renderCourses();
                }
            });

            // 筛选操作按钮
            resetFiltersBtn.addEventListener('click', function () {
                resetFilters();
                renderCourses();
            });

            applyFiltersBtn.addEventListener('click', function () {
                renderCourses();
            });
        }

        // 重置筛选器
        function resetFilters() {
            currentLevel = 'all';
            currentDuration = 'all';
            currentType = 'all';
            currentTags = [];
            currentSort = 'popular';
            currentSearchTerm = '';

            levelFilter.value = 'all';
            durationFilter.value = 'all';
            typeFilter.value = 'all';
            searchInput.value = '';
            sortOptions.value = 'popular';

            document.querySelectorAll('.tag').forEach(tag => {
                tag.classList.remove('active');
            });
            document.querySelector('.tag[data-tag="all"]').classList.add('active');

            currentPage = 1;
        }

        // 获取筛选后的课程
        function getFilteredCourses() {
            let filtered = courses.filter(course => {
                // 搜索匹配
                const matchesSearch = currentSearchTerm === '' ||
                    course.title.toLowerCase().includes(currentSearchTerm) ||
                    course.description.toLowerCase().includes(currentSearchTerm) ||
                    course.tags.some(tag => tag.includes(currentSearchTerm));

                // 难度级别匹配
                const matchesLevel = currentLevel === 'all' || course.level === currentLevel;

                // 时长匹配
                const matchesDuration = currentDuration === 'all' ||
                    (currentDuration === 'short' && getDurationHours(course.duration) <= 5) ||
                    (currentDuration === 'medium' && getDurationHours(course.duration) > 5 && getDurationHours(course.duration) <= 15) ||
                    (currentDuration === 'long' && getDurationHours(course.duration) > 15);

                // 类型匹配
                const matchesType = currentType === 'all' || course.type === currentType;

                // 标签匹配
                const matchesTags = currentTags.length === 0 ||
                    currentTags.some(tag => course.tags.includes(tag));

                return matchesSearch && matchesLevel && matchesDuration && matchesType && matchesTags;
            });

            // 排序
            filtered.sort((a, b) => {
                switch (currentSort) {
                    case 'newest':
                        return b.id - a.id; // 假设ID越大越新
                    case 'rating':
                        return b.rating - a.rating;
                    case 'duration':
                        return getDurationHours(b.duration) - getDurationHours(a.duration);
                    case 'popular':
                    default:
                        return b.students - a.students;
                }
            });

            return filtered;
        }

        // 从时长字符串中提取小时数
        function getDurationHours(duration) {
            const match = duration.match(/(\d+)/);
            return match ? parseInt(match[1]) : 0;
        }

        // 渲染课程卡片
        function renderCourses() {
            const filteredCourses = getFilteredCourses();
            const totalPages = Math.ceil(filteredCourses.length / coursesPerPage);

            // 更新分页信息
            pageInfo.textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;

            // 更新分页按钮状态
            prevPageBtn.disabled = currentPage <= 1;
            nextPageBtn.disabled = currentPage >= totalPages;

            // 计算当前页的课程
            const startIndex = (currentPage - 1) * coursesPerPage;
            const endIndex = startIndex + coursesPerPage;
            const coursesToShow = filteredCourses.slice(startIndex, endIndex);

            // 清空课程网格
            coursesGrid.innerHTML = '';

            // 如果没有课程，显示空状态
            if (coursesToShow.length === 0) {
                coursesGrid.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-search"></i>
                        <h3>没有找到相关课程</h3>
                        <p>尝试调整搜索条件或筛选条件</p>
                    </div>
                `;
                return;
            }

            // 渲染课程卡片
            coursesToShow.forEach(course => {
                const courseCard = document.createElement('div');
                courseCard.className = 'course-card';

                // 根据进度确定按钮文本
                let buttonText = '开始学习';
                if (course.progress > 0 && course.progress < 100) {
                    buttonText = '继续学习';
                } else if (course.progress === 100) {
                    buttonText = '查看证书';
                }

                courseCard.innerHTML = `
                    <div class="course-image">
                        <img src="${course.image}" alt="${course.title}">
                        <div class="course-category">${getCategoryName(course.category)}</div>
                        <div class="course-level">${getLevelName(course.level)}</div>
                        ${course.progress > 0 ? `
                        <div class="course-progress">
                            <div class="progress-bar" style="width: ${course.progress}%"></div>
                        </div>
                        ` : ''}
                    </div>
                    <div class="course-content">
                        <h3 class="course-title">${course.title}</h3>
                        <p class="course-description">${course.description}</p>
                        <div class="course-tags">
                            ${course.tags.map(tag => `<span class="course-tag">${tag}</span>`).join('')}
                        </div>
                        <div class="course-meta">
                            <span><i class="fas fa-clock"></i> ${course.duration}</span>
                            <span><i class="fas fa-users"></i> ${course.students.toLocaleString()}</span>
                            <span><i class="fas fa-star"></i> ${course.rating}</span>
                        </div>
                        <div class="course-actions">
                            <button class="btn btn-secondary">查看详情</button>
                            <button class="btn btn-primary">${buttonText}</button>
                        </div>
                    </div>
                `;

                coursesGrid.appendChild(courseCard);
            });
        }

        // 获取分类名称
        function getCategoryName(category) {
            const categories = {
                'frontend': '前端开发',
                'backend': '后端开发',
                'mobile': '移动开发',
                'data': '数据分析',
                'design': '设计',
                'devops': '运维'
            };
            return categories[category] || category;
        }

        // 获取难度级别名称
        function getLevelName(level) {
            const levels = {
                'beginner': '初级',
                'intermediate': '中级',
                'advanced': '高级'
            };
            return levels[level] || level;
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>

</html>